<template>
  <!-- 检查事项 -->
  <div class="dialog-container">
    <el-dialog
      :title="'详情'"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>报警详情</span>
        </div>
        <table>
          <tr><td class="td">报警信息</td><td>{{ dataForm.historyAlarm.alarmInformation }}</td></tr>
          <tr><td class="td">开始时间</td><td>{{ dataForm.historyAlarm.alarmStartTime }}</td></tr>
          <tr><td class="td">结束时间</td><td>{{ dataForm.historyAlarm.alarmEndTime }}</td></tr>
          <tr><td class="td">持续时长</td><td>{{ dataForm.historyAlarm.duration }}</td></tr>
          <tr><td class="td">处理结果</td><td>{{ dataForm.historyAlarm.processingResults }}</td></tr>
          <tr><td class="td">图片：</td><td><el-image v-if="dataForm.historyAlarm.processingImagePath" style="width: 100px; height: 100px" :src="staticImgUrl+dataForm.historyAlarm.processingImagePath" :preview-src-list="[staticImgUrl+dataForm.historyAlarm.processingImagePath]" /></td></tr>
        </table>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>评价详情</span>
        </div>
        处置人员评价:<el-rate
          v-model="dataForm.historyAlarm.disposalPersonnelEvaluation"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        />
        整体评价:<el-rate
          v-model="dataForm.historyAlarm.overallEvaluation"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        />
        内容说明：{{ dataForm.historyAlarm.contentDescription }}
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>操作流程</span>
        </div>
        <el-timeline>
          <el-timeline-item
            v-for="(alarmProcesses, index) in dataForm.alarmProcesses"
            :key="index"
            :icon="alarmProcesses.icon"
            :type="alarmProcesses.type"
            color="#0bbd87"
            size="large"
            :timestamp="alarmProcesses.operationTime"
          >
            {{ alarmProcesses.operationContent }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getAlarm } from '@/api/business/historyAlarm'
import { staticImgUrl } from '@/url'

export default {
  name: 'DetailsDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      staticImgUrl: staticImgUrl,
      dataForm: {
        historyAlarm: {
          alarmInformation: null,
          alarmStartTime: null,
          alarmEndTime: null,
          duration: null,
          processingResults: null,
          processingImagePath: '',
          contentDescription: '',
          disposalPersonnelEvaluation: 0,
          overallEvaluation: 0
        },
        alarmProcesses: null
      }
    }
  },
  created() {

  },
  methods: {
    initData() {
      this.getData()
    },
    getData() {
      const obj = JSON.parse(JSON.stringify(this.obj))
      getAlarm(obj.id).then((data) => {
        // console.log(JSON.parse(data.data.historyAlarm.alarmInformation))
        this.dataForm.historyAlarm = data.data.historyAlarm
        this.dataForm.alarmProcesses = data.data.alarmProcesses
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
    },
    clearData() {
      this.dataForm = {
        historyAlarm: {
          alarmInformation: null,
          alarmStartTime: null,
          alarmEndTime: null,
          duration: null,
          processingResults: null,
          processingImagePath: '',
          contentDescription: '',
          disposalPersonnelEvaluation: 0,
          overallEvaluation: 0
        },
        alarmProcesses: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    // width: 90%;
    margin-bottom: 10px;
  }
  .td{
    width: 80px;
    height: 20px;
  }
</style>
